<template>
    <div class="tab-item" :class="{select:selected}" @click="$emit('click')">
        <i class="oa-icon" :class="icon">
        </i>
        <label class="icon-label">{{label}}</label>
        <label v-show="number>0" class="number">{{number}}</label>
        <label class="dot" v-show="showTips"></label>
    </div>

</template>

<script>
    export default {
        name: "oa-tab-item",
        props: {
            icon: "",
            label: "",
            selected: {
                type: Boolean,
                default: false
            },
            showTips: {
                type: Boolean,
                default: true
            },
            number: {
                type: Number,
                default: 0
            }
        }
    }
</script>

<style scoped lang="less">
    .tab-item {
        display: flex;
        flex: 1;
        height: 50px;
        flex-direction: column;
        text-align: center;
        font-size: 12px;
        color: #8a8a8a;
        align-items: center;
        position: relative;
        justify-content: center;
        &:active {
            background: darken(#fff, 5%);
        }
        &.select {
            color: #41a6f0;
            .oa-icon {
                color: #41a6f0;
            }
            .icon-label {
                color: #41a6f0;
            }
        }
        .oa-icon {
            font-size: 24px;
            color: #8a8a8a;
        }
        .icon-label {
            color: #8a8a8a;
            margin-top: 2px;
        }
        .number {
            background: #f05d34;
            width: 18px;
            height: 18px;
            color: #fff;
            line-height: 18px;
            right: 10px;
            top: 0px;
            position: absolute;
            border-radius: 50%;
        }
        .dot {
            width: 8px;
            height: 8px;
            background: #f05d34;
            position: absolute;
            border-radius: 50%;
            top: 4px;
            right: 24px;

        }
    }
</style>